<template>
	<view class="content pad-40">
		<view class="betweenX pad-top-10 mar-bottom-20 centerY">
			<view>
				<!-- <text class="font-82 color-fff bold">GPT</text> -->
				<image class="logo" src="/static/image/logo.png" mode="" />
				<view class="color-fff font-24 mar-top-6">{{$t('home.hello')}} {{store.userInfo.nickname}}</view>
			</view>
			<!-- <image class="msg" src="../../static/image/dialog.png" mode=""></image> -->
		</view>
		<up-swiper :list="swiperList" keyName="cover" height="200" showTitle autoplay circular
			@click="handSwiperList"></up-swiper>
		<view class="bg_color_fff radius20 mar-top-30 pad-left-right-30">
			<view class="u-bottom-line text-center pad-top-30 pad-bottom-30">
				<view class="font-50">
					{{income.total_today || "0"}} <text class="font-20">USDT</text>
				</view>
				<view class="font-20">{{$t('home.today_personal_income')}}</view>
			</view>
			<up-line></up-line>
			<view class="pad-top-20 pad-bottom-20">
				<up-scroll-list :indicator="false">
					<view v-for="item in coinList" :key="item">
						<view class="item mar-top-30">
							<view class="flex align-center">
								<image class="rec-icon mar-right-10" :src="item.logo_url" mode="" />
								<view class="font-24">{{ item.symbol }}</view>
							</view>
							<view class="font-30 mar-top-6">{{ item.USDT_price }}</view>
							<view class="font-24 mar-top-6"
								:class="[Number(item.USDT_change) > 0 ? 'color_01b176' : 'color_DD4A68']">
								{{ item.USDT_change }}%
							</view>
						</view>
					</view>
				</up-scroll-list>
			</view>
		</view>
		<view class="image-box mar-top-30">
			<image class="pig" src="../../static/image/pig.png"></image>
			<view class="text pad-40 color-fff pad-bottom-60">
				<view>
					<view class="font-50">0{{$t('home.investment')}}</view>
					<view class="font-30 mar-top-10">{{$t('home.first_investment')}}</view>
				</view>

				<view @click="handContractPurchase(robotList.filter(item => Number(item.price) === 0)[0])"
					class="bg-main color-fff radius20 pad-left-right-40 pad-top-bottom-4 font-28">
					{{$t('home.start_initial_investment')}}
				</view>
			</view>
		</view>

		<view class="mar-top-30">{{$t('home.robot')}}</view>
		<view class="bal-bar betweenX pad-14 radius50 centerY mar-top-bottom-20"
			@click="jumpModlue('/pages/my_actions/robot-product/robot-product')">
			<view class="centerY">
				<image class="robot" src="../../static/image/robot.png"></image>
				<view class="font-28 mar-left-30">{{$t('home.view_my_robot_warehouse')}}</view>
			</view>
			<view>
				<view class="bg_color_fff radius50 pad-5">
					<up-icon name="arrow-right" color="#000" size="14"></up-icon>
				</view>
			</view>
		</view>

		<!-- list -->
		<view class="has-robot mar-bottom-20 mar-top-40 font-28">
			<text>{{$t('home.my_number_robots')}}</text>
			<text>{{productList.filter(item => item.valid_seconds_now > 0).length}} {{$t('home.platform')}}</text>
		</view>

		<view class="list-box mar-top-20">
			<view class="list mar-bottom-20" v-for="item in robotList.filter(item => Number(item.price) > 0)"
				:key="item.id">
				<view class="bal-bar betweenX pad-14 centerY">
					<view class="centerY">
						<image class="robot" src="../../static/image/robot.png"></image>
						<view class="font-28 mar-left-30 color-fff">{{item.title}}</view>
					</view>
					<view>
						<view @click="handContractPurchase(item)"
							class="bg_color_fff font-28 radius50 pad-left-right-10 pad-top-bottom-10 ">
							{{$t('home.contract_purchase')}}
						</view>
					</view>
				</view>
				<view class="button-bg"></view>
			</view>
		</view>

		<!-- 九宫格 -->
		<view class="mar-top-30">{{$t('home.service')}}</view>
		<view class="bg_color_fff mar-top-20 pad-30 radius20 grid">
			<up-grid border>
				<up-grid-item bgColor="#f2f7fe" v-for="(baseListItem,baseListIndex) in baseList" :key="baseListIndex"
					@click="jumpModlue(baseListItem.url)">
					<view class="pad-top-bottom-30 columnY centerXY">
						<image class="serv-link" :src="baseListItem.image"></image>
						<text class="text-center mar-top-20  font-22">{{baseListItem.title}}</text>
					</view>
				</up-grid-item>
			</up-grid>
		</view>

		<!-- 合作伙伴 -->
		<view class="mar-top-30">{{$t('home.partners') }}</view>
		<view class="mar-top-40">
			<up-scroll-list :indicator="false" class="scroll-box">
				<view v-for="(item, index) in 10" :key="index"
					class="bg_color_fff pad-20 mar-right-20 radius20 scroll-list">
					<image class="scroll-image" :src="`/static/image/icon${index+11}.png`"></image>
				</view>
			</up-scroll-list>
		</view>
		<robot></robot>
		<!-- <custom-tabbar :value="0" /> -->
	</view>

	<!-- 投资 -->
	<up-popup :show="isInvest" @close="isInvest = false" closeable bgColor="#ffc820">
		<view class="pad-20">
			<text class="mar-top-20">{{$t('home.contract_purchase')}}</text>

			<view class="bg_color_fff radius20 mar-top-30 pad-30">
				<view class="betweenX">
					<view>
						<view class="color_929292 font-24">{{$t('home.price')}}</view>
						<view class="font-28">{{Number(robotItem.price).toString()}}USDT</view>
					</view>
					<view class="text-right">
						<view class="color_929292 font-24">{{$t('home.expected_daily_revenue')}}</view>
						<view class="font-28">{{robotItem.about_income_rate}}USDT</view>
					</view>
				</view>
				<view class="betweenX mar-top-30">
					<view>
						<view class="color_929292 font-24">{{$t('home.validity_period')}}</view>
						<view class="font-28">{{robotItem.valid_days}}{{$t('home.day')}}</view>
					</view>
					<view class="text-right">
						<view class="color_929292 font-24">{{$t('home.order_price')}}</view>
						<view class="font-28">{{ Number(robotItem.price) <= 0 ? $t('home.experience_gold') : ""}}
							{{Number(robotItem.settle_fund).toString()}}
							USDT/{{$t('home.single')}}
						</view>
					</view>
				</view>
			</view>

			<view class="bg_color_fff radius20 mar-top-30 pad-30">
				<view class="centerXY">
					<up-number-box :disabledInput="true" v-model="formData.num"></up-number-box>
				</view>
				<up-line margin="30rpx 0 "></up-line>
				<view class="color_929292 font-24">{{$t('home.current_balance')}}</view>
				<view class="font-28">{{store.userInfo.balance}} USDT</view>
				<up-button color="#ffc820" class="mar-top-50" shape="circle" @click="handConfirmPurchaseRobot"
					:text="`${$t('home.payment')} ${Number(paymentAmount).toString()} USDT`"></up-button>
			</view>

			<!-- 温馨提示 -->
			<view class="color-fff font-28 mar-top-40">
				<view>{{$t('home.kind_reminder')}}</view>
				<view>{{robotItem.title}}{{$t('home.robot')}}</view>
				<rich-text :nodes="$t('home.kind_reminder_content')"></rich-text>
			</view>
		</view>
	</up-popup>
	<!-- <drag-button :isDock="true" :existTabBar="true" @btnClick="btnClick" /> -->

	<up-popup :show="visibelNotice" @close="visibelNotice = false" mode="center" round="10" bgColor="#FFFFFF">
		<scroll-view scroll-y="true" class="notice-box">
			<view class="font-32 text-center widthB100 mar-bottom-20">{{noticeInfo.title}}</view>
			<rich-text :nodes="noticeInfo.content.content"></rich-text>
		</scroll-view>
	</up-popup>
</template>

<script setup>
	import CustomTabbar from '@/components/custom-tabbar/index.vue'
	import dragButton from "@/components/drag-button/drag-button.vue";

	import {
		ref,
		reactive,
		computed
	} from 'vue';
	import {
		useI18n
	} from 'vue-i18n';
	import {
		onLoad,
		onShow,
		onHide
	} from '@dcloudio/uni-app'
	import {
		pledgeRobot,
		pledgeRobotBuy,
		rankingCoin,
		robotIncome,
		noticeaPgeList,
		allOfPos
	} from '@/api/index'
	import {
		pledgeRobotAllOfOwner
	} from '@/api/user'
	import {
		useStore
	} from '@/store/commonStore'

	const btnClick = () => {
		window.location.href = 'https://line.me/ti/p/OiNlq3hft6';
	}

	const store = useStore()
	const {
		t
	} = useI18n()
	// 首次投资
	let isInvest = ref(false);
	// 创建响应式数据  
	const baseList = ref([{
			image: '../../static/image/icon5.png',
			title: t('home.sharingInvitation'),
			url: '/pages/index_actions/invite-friends/invite-friends'
		},
		{
			image: '../../static/image/icon6.png',
			title: t('home.stored_value'),
			url: '/pages/index_actions/stored-value/stored-value'
		},
		{
			image: '../../static/image/icon7.png',
			title: t('home.withdrawal'),
			url: '/pages/index_actions/withdrawal/withdrawal'
		},
		{
			image: '../../static/image/icon8.png',
			title: t('home.online_customer_service'),
			url: "/pages/index_actions/contact-customer-service/contact-customer-service"
		},
		{
			image: '../../static/image/icon9.png',
			title: t('home.helpGuide'),
			url: '/pages/show-rich-text/show-rich-text?type=help'
		},
		{
			image: '../../static/image/icon10.png',
			title: t('home.aboutUs'),
			url: '/pages/show-rich-text/show-rich-text?type=about_us'
		},
	]);

	// 计算所需支付的金额
	const paymentAmount = computed(() => {
		return (formData.value.num * Number(robotItem.value.price)).toFixed(4);
	});
	// 购买机器人参数
	const formData = ref({
		id: "",
		num: 1
	});
	const swiperList = ref([]) // 轮播图
	const noticeInfo = ref({});
	const visibelNotice = ref(false)
	const timer = ref(0);
	const income = ref({}) // 收益信息
	const robotList = ref([]) // 机器人列表
	const productList = ref([]) // 获取我的机器人
	const coinList = ref([]) // 币种
	const robotItem = ref({})
	const getData = async () => {
		const res = await pledgeRobot()
		robotList.value = res.data.lists
	}
	// 倒计时每多少秒执行一次
	const startTimer = () => {
		timer.value = setInterval(() => {
			// 每20秒调用一次的方法
			getRobotIncome();
		}, 5000); // 20秒，单位是毫秒
	}

	// 
	const getSwiperList = async () => {
		const res = await allOfPos({
			code: 'home_top_ad'
		})
		swiperList.value = res.data.lists
	}

	const handSwiperList = (event) => {
		const jump_method = swiperList.value[event].jump_method
		switch (jump_method) {
			case 2:
				uni.navigateTo({
					url: swiperList.value[event]?.jump_url
				})
				break;
			case 3:
				// #ifdef APP-PLUS
				plus.runtime.openURL(swiperList.value[event]?.jump_url);
				// #endif

				// #ifdef H5
				window.location.href = swiperList.value[event]?.jump_url;
				// #endif
				break;
			default:
				break;
		}
	}

	const getPledgeRobot = async () => {
		const res = await pledgeRobotAllOfOwner({})
		productList.value = res.data.lists
	}

	// 获取币种价格波动
	const getCurrencyList = async () => {
		const res = await rankingCoin()
		coinList.value = res.data.lists
	}

	// 获取收益
	const getRobotIncome = async () => {
		const res = await robotIncome()
		income.value = res.data
	}
	// 
	const handContractPurchase = (item) => {
		robotItem.value = item
		isInvest.value = true
	}

	const jumpModlue = (url) => {
		uni.navigateTo({
			url: url
		})
	}
	// 获取公告
	const getNoticeaPgeList = async () => {
		const res = await noticeaPgeList({
			page: 1,
			ps: 10
		})
		noticeInfo.value = res.data.data[0]
		if (!uni.getStorageSync('noticeId') || uni.getStorageSync('noticeId') !== noticeInfo.value.id) {
			uni.setStorageSync('noticeId', noticeInfo.value.id)
			visibelNotice.value = true
		}
	}
	// 确认支付
	const handConfirmPurchaseRobot = async () => {
		if (Number(store.userInfo.balance) < Number(paymentAmount.value)) return uni.$u.toast(t(
			'home.insufficient_balance'));
		formData.value.id = robotItem.value.id;
		const res = await pledgeRobotBuy(formData.value);
		if (res.code === 200) {
			isInvest.value = false;
			uni.$u.toast(t('home.purchase_successful'));
			uni.navigateTo({
				url: '/pages/my_actions/robot-product/robot-product'
			});
		};
	}

	onShow(() => {
		if (!uni.getStorageSync('token')) return
		getSwiperList()
		getNoticeaPgeList()
		getRobotIncome()
		// startTimer()
		getPledgeRobot()
	})

	onLoad(() => {
		if (!uni.getStorageSync('token')) return
		getCurrencyList()
		getData()
	})

	// onHide(() => {
	// 	clearInterval(timer.value); // 停止定时器
	// })
</script>

<style scoped lang="scss">
	.rec-icon {
		width: 26rpx;
		height: 26rpx;
	}

	.content {
		width: 100%;
		background: url('../../static/image/index-bg.png') no-repeat;
		background-size: 100% 800rpx;

		.scroll-list {
			box-shadow: 0 .7246vw 1.2077vw rgba(0, 0, 0, .1);
		}

		:deep() {
			.scroll-box .uni-scroll-view-content {
				height: 120rpx !important;
			}
		}

		.scroll-image {
			display: block;
			width: 160rpx;
			height: 60rpx;
		}

		.u-scroll-list {
			padding: 0;
		}

		.serv-link {
			display: block;
			width: 46rpx;
			height: 46rpx;
		}

		.logo {
			display: block;
			width: 198rpx;
			height: 110rpx;
		}

		.msg {
			width: 90rpx;
			height: 90rpx;
		}

		.item {
			width: 200rpx;
			margin-right: 30rpx;
		}

		.image-box {
			position: relative;

			.pig {
				width: 100%;
				height: 340rpx;
				// position: absolute;
			}

			.text {
				// width: 100%;
				top: 0;
				height: 340rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				position: absolute;
			}
		}

		.bal-bar {
			background: #0fbc96;
		}

		.robot {
			width: 64rpx;
			height: 64rpx;

		}

		.list {
			border-radius: 20rpx;
			overflow: hidden;

			.button-bg {
				background: url('../../static/image/button-bg.gif') no-repeat;
				background-size: 100% 100%;
				width: 100%;
				height: 72rpx;
			}
		}

	}

	.notice-box {
		width: 600rpx;
		height: auto;
		min-height: 700rpx;
		max-height: 1000rpx;
		padding: 25rpx 30rpx;
	}
</style>